<template>
  <!-- 
    新增编辑组件
    仅仅展示UI试图组件，不参与任何的逻辑编辑
   -->
  <el-dialog custom-class="add-and-edit-rule-ui" :close-on-click-modal="false" center top="5vh"
    :title="dialogForm.title" :visible.sync="dialogForm.dialogVisible" width="50%">
    <el-form label-position="right" label-suffix=":" label-width="140px" :model="dialogForm.form" :rules="rules"
      ref="AddAndEditRuleUIRef">
      <el-form-item label="计费规则编号" prop="ruleNumber"><el-input v-model="dialogForm.form.ruleNumber"
          clearable></el-input></el-form-item>
      <el-form-item label="计费规则名称" prop="ruleName"><el-input v-model="dialogForm.form.ruleName"
          clearable></el-input></el-form-item>
      <el-form-item label="计费方式" prop="chargeType">
        <el-radio-group v-model="dialogForm.form.chargeType" size="small">
          <el-radio v-for="item in chargeTypeList"  :key="item.id" :label="item.id" border>{{ item.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="免费时长（分钟）" prop="freeDuration">
        <el-input-number clearable v-model="dialogForm.form.freeDuration" :min="0" controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="收费上限（元）" prop="chargeCeiling"><el-input v-model="dialogForm.form.chargeCeiling"
          clearable></el-input></el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import CheckFormItem from '@/utils/checkElFormItemProp'
export default {
  name: 'AddAndEditRuleUI',
  props: {
    dialogForm: {
      type: Object,
      required: true,
      default: () => ({})
    },
    formItems: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  },
  beforeCreate() {
    this.chargeTypeList = [{ id: 'duration', name: '时长收费' }, { id: 'turn', name: '按次收费' }, { id: 'partition', name: '分段收费' }]
    this.rules = {
      ruleNumber: [{ required: true, message: '请输入计费规则编号', trigger: 'blur' }],
      ruleName: [{ required: true, message: '请输入计费规则名称', trigger: 'blur' }],
      chargeType: [{ required: true, message: '请选择计费方式', trigger: 'change' }],
      freeDuration: [{ required: false, message: '免费时长（分钟）', trigger: 'change' }],
      chargeCeiling: [{ required: false, validator: CheckFormItem.checkChargeCeiling, trigger: 'blur' }],
      ruleNameView: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }],
    }
  },
  methods: {
    resetForm() {
      this.$refs.AddAndEditRuleUIRef.clearValidate()//移除校验
      this.$emit('resetForm')
    },
    confirm() {
      this.$refs.AddAndEditRuleUIRef.validate((valid) => {
        if (valid) {
          this.dialogForm.dialogVisible = false
          this.$emit('comfirmForm')
          return
        }
        return false;
      });

    },
  },
  computed: {},
  watch: {
    'dialogForm.dialogVisible': {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.$refs.AddAndEditRuleUIRef.clearValidate()//打开就移除校验
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
.add-and-edit-rule-ui {
  .el-dialog__title {
    display: block;
    text-align: left;
  }

  .el-dialog__body {
    background-color: #f5f6f8;

    .el-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 62px;
      grid-auto-rows: 62px;

      .el-form-item {
        &:nth-child(-n+3) {
          grid-column: 1/-1;
        }
      }
    }

  }
}
</style>